<template>
  <div class="bk">
    <h1 class="t1">防 反 贫 数 字 化 监 测 平 台</h1>
    <div class="success-container">
      <el-card class="success-card">
        <div class="success-icon">
          <el-icon :size="80" color="#67C23A">
            <CircleCheckFilled />
          </el-icon>
        </div>
        <h1 class="success-title">注册成功</h1>
        <p class="welcome-text">欢迎加入防返贫数字化监测平台</p>
        
        <div class="info-section">
          <div class="info-item">
            <span class="info-label">账  号：</span>
            <span class="info-value">{{ userInfo.account }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">用户类型：</span>
            <span class="info-value">{{ userInfo.userType }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">注册时间：</span>
            <span class="info-value">{{ userInfo.registerTime }}</span>
          </div>
        </div>
        
        <div class="button-group">
          <el-button 
            type="primary" 
            class="login-button" 
            @click="goToLogin"
            size="large"
          >
            前往登录
          </el-button>
          <el-button 
            class="back-button" 
            @click="goToHome"
            size="large"
          >
            返回首页
          </el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { CircleCheckFilled } from '@element-plus/icons-vue';

const router = useRouter();

// 用户信息 - 实际应用中可以从路由参数或pinia/store中获取
const userInfo = ref({
  account: 'user123456',
  userType: '乡村干部',
  registerTime: formatDate(new Date())
});

// 格式化日期
function formatDate(date) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  
  return `${year}-${month}-${day} ${hours}:${minutes}`;
}

// 跳转到登录页面
function goToLogin() {
  router.push('/login');
}

// 跳转到首页
function goToHome() {
  router.go(-1);
}
</script>

<style lang="less" scoped>
.bk {
  /* 背景图设置 */
  background-image: url("@/assets/background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.t1 {
  margin-top: 90px;
  font-size: 60px;
  text-align: center;
}

.success-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  padding: 20px;
}

.success-card {
  align-items: center;
  text-align: center;
  width: 520px; /* 卡片宽度 */
  border-radius: 15px; /* 圆角 */
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); /* 阴影 */
  background-color: rgba(255, 255, 255, 0.5);
  text-align: center;
}

.success-icon {
  margin-bottom: 20px;
}

.success-title {
  font-size: 28px;
  color: #303133;
  margin-bottom: 10px;
  font-weight: 500;
}

.welcome-text {
  font-size: 18px;
  color: #606266;
  margin-bottom: 30px;
}

.info-section {
  text-align: left;
  margin: 0 auto 30px;
  width: 80%;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
}

.info-item {
  margin-bottom: 18px;
  font-size: 16px;
  display: flex;
  align-items: center;
}

.info-label {
  color: #606266;
  min-width: 100px;
  text-align: right;
  margin-right: 20px;
  font-weight: 500;
}

.info-value {
  color: #303133;
  flex: 1;
  font-weight: 500;
}

.button-group {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.login-button {
  width: 100px;
}

.back-button {
  width: 100px;
  border-color: #dcdfe6;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .t1 {
    font-size: 36px;
    margin-top: 40px;
  }
  
  .success-card {
    width: 90%;
    padding: 30px 20px;
  }
  
  .info-section {
    width: 90%;
    padding: 15px;
  }
  
  .button-group {
    flex-direction: column;
    gap: 10px;
  }
  
  .login-button,
  .back-button {
    width: 60%;
  }
}
</style>